﻿<!DOCTYPE html>
<html lang="zh">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星梦时间轴 - DreamCraft·星梦工艺</title>
			<style> .divcss5{text-align:center} </style> 

<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
	.demo{padding: 2em 0;}
	.main-timeline{
		overflow: hidden;
		position: relative;
	}
	.main-timeline:before{
		content: "";
		width: 7px;
		height: 100%;
		background: #909090;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
	}
	.main-timeline .timeline{
		width: 50%;
		padding-left: 50px;
		float: right;
		position: relative;
	}
	.main-timeline .timeline:before{
		content: "";
		width: 30px;
		height: 30px;
		border-radius: 50%;
		background: #909090;
		border: 7px solid #fff;
		position: absolute;
		top: 50%;
		left: -15px;
		transform: translateY(-50%);
	}
	.main-timeline .timeline:after{
		content: "";
		display: block;
		border-right: 30px solid #ee4423;
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		position: absolute;
		top: 50%;
		left: 24px;
		transform: translateY(-50%);
	}
	.main-timeline .timeline-content{
		display: block;
		padding: 25px;
		border-radius: 100px;
		background: #ee4423;
		position: relative;
	}
	.main-timeline .timeline-content:before,
	.main-timeline .timeline-content:after{
		content: "";
		display: block;
		width: 100%;
		clear: both;
	}
	.main-timeline .timeline-content:hover{ text-decoration: none; }
	.main-timeline .inner-content{
		width: 70%;
		float: right;
		padding: 15px 20px 15px 15px;
		background: #fff;
		border-radius: 0 100px 100px 0;
		color: #ee4423;
	}
	.main-timeline .year{
		display: inline-block;
		font-size: 50px;
		font-weight: 600;
		color: #fff;
		position: absolute;
		top: 50%;
		left: 7%;
		transform: translateY(-50%);
	}
	.main-timeline .title{
		font-size: 24px;
		font-weight: 600;
		text-transform: uppercase;
		margin: 0 0 5px 0;
	}
	.main-timeline .description{
		font-size: 14px;
		margin: 0 0 5px 0;
	}
	.main-timeline .timeline:nth-child(2n){ padding: 0 50px 0 0; }
	.main-timeline .timeline:nth-child(2n):before,
	.main-timeline .timeline:nth-child(2n) .year{
		left: auto;
		right: -15px;
	}
	.main-timeline .timeline:nth-child(2n) .year{ right: 7%; }
	.main-timeline .timeline:nth-child(2n):after{
		border-right: none;
		border-left: 30px solid #ee4423;
		left: auto;
		right: 24px;
	}
	.main-timeline .timeline:nth-child(2n) .inner-content{
		float: none;
		border-radius: 100px 0 0 100px;
		text-align: right;
	}
	.main-timeline .timeline:nth-child(2){ margin-top: 130px; }
	.main-timeline .timeline:nth-child(odd){ margin: -130px 0 0 0; }
	.main-timeline .timeline:nth-child(even){ margin-bottom: 80px; }
	.main-timeline .timeline:first-child,
	.main-timeline .timeline:last-child:nth-child(even){ margin: 0; }
	.main-timeline .timeline:nth-child(2n) .timeline-content{ background: #f68829; }
	.main-timeline .timeline:nth-child(2n),
	.main-timeline .timeline:nth-child(2n) .inner-content{ color: #f68829; }
	.main-timeline .timeline:nth-child(2n):after{ border-left-color: #f68829; }
	.main-timeline .timeline:nth-child(3n) .timeline-content{ background: #2991d0; }
	.main-timeline .timeline:nth-child(3n),
	.main-timeline .timeline:nth-child(3n) .inner-content{ color: #2991d0; }
	.main-timeline .timeline:nth-child(3n):after{ border-right-color: #2991d0; }
	.main-timeline .timeline:nth-child(4n) .timeline-content{ background: #9361aa; }
	.main-timeline .timeline:nth-child(4n),
	.main-timeline .timeline:nth-child(4n) .inner-content{ color: #9361aa; }
	.main-timeline .timeline:nth-child(4n):after{ border-left-color: #9361aa; }
	.main-timeline .timeline:nth-child(5n) .timeline-content{ background: #a7be26; }
	.main-timeline .timeline:nth-child(5n),
	.main-timeline .timeline:nth-child(5n) .inner-content{ color: #a7be26; }
	.main-timeline .timeline:nth-child(5n):after{ border-right-color: #a7be26; }
	@media only screen and (max-width: 1200px){
		.main-timeline .inner-content{ width: 80%; }
		.main-timeline .year{
			font-size: 30px;
			left: 5px;
			transform: translateY(-50%) rotate(-90deg);
		}
		.main-timeline .timeline:nth-child(2n) .year{ right:5px; }
	}
	@media only screen and (max-width: 990px){
		.main-timeline .year{
			font-size: 30px;
			left: 0;
		}
		.main-timeline .timeline:nth-child(2n) .year{ right: 0; }
	}
	@media only screen and (max-width: 767px){
		.main-timeline:before,
		.main-timeline .timeline:before{
			left: 10px;
			transform: translateX(0);
		}
		.main-timeline .timeline:nth-child(2n):after{
			border-left: none;
			border-right: 30px solid #ee4423;
			right: auto;
			left: 24px;
		}
		.main-timeline .timeline,
		.main-timeline .timeline:nth-child(even),
		.main-timeline .timeline:nth-child(odd){
			width: 100%;
			float: none;
			margin: 0 0 30px 0;
		}
		.main-timeline .timeline:last-child{ margin-bottom: 0; }
		.main-timeline .timeline:nth-child(2n){ padding: 0 0 0 50px; }
		.main-timeline .timeline:before,
		.main-timeline .timeline:nth-child(2n):before{ left: -2px; }
		.main-timeline .inner-content{ width: 85%; }
		.main-timeline .timeline:nth-child(2n) .inner-content{
			float: right;
			border-radius: 0 100px 100px 0;
			text-align: left;
		}
		.main-timeline .timeline:nth-child(2n) .year{
			right: auto;
			left: 0;
		}
		.main-timeline .timeline:nth-child(2n):after{ border-right-color: #f68829; }
		.main-timeline .timeline:nth-child(3n):after{ border-left-color: #2991d0; }
		.main-timeline .timeline:nth-child(4n):after{ border-right-color: #9361aa; }
		.main-timeline .timeline:nth-child(5n):after{ border-left-color: #a7be26; }
	}
	 
	@media only screen and (max-width: 479px){
		.main-timeline .timeline-content{ padding: 15px; }
		.main-timeline .inner-content{ width: 80%; }
		.main-timeline .year{ font-size: 20px; }
	}
</style>
</head>
<body>



<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="main-timeline">
					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>3.29</span>
							<div class="inner-content">
								<h4 class="title">叶子广场开服 初具规模</h4>
								<p class="description">
									服务对象叶家村，由<strong>晓宇</strong>建立的笔记本服
									最初<strong>晓宇</strong>独自运营<strong>叶子广场</strong>服务器<br>
									并公布于叶家村内部，作为公益服开放。<br>
									这是星梦工艺的运营雏形，此时期的运营经验为后期的独立运营打下了坚实基础。<br>
								</p>
							</div>
						</a>
					</div>

					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>4.12</span>
							<div class="inner-content">
								<h3 class="title">星梦工艺创立 独立运营</h3>
								<p class="description">
									此时星梦工艺已经脱离叶家村，<br>
									成为独立发展的小众服务器团队。<br>
									此时晓宇尝试运行摸鱼服近一个月<br>
									运营期间同样遇到多种困难，<br>
									幸运的是，我们挺了过来。
								</p>
							</div>
						</a>
					</div>

					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>4.16</span>
							<div class="inner-content">
								<h3 class="title">轨道交通立项 众筹解决</h3>
								<p class="description">
									摸鱼服时期过后，晓宇决定开始发展轨交<br>
									此时内部的一位运营成员发起众筹提议<br>
									由该成员购置云服，群内纷纷响应<br>
									随后，轨道交通开始了如火如荼的建设。
								</p>
							</div>
						</a>
					</div>

					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>5.14</span>
							<div class="inner-content">
								<h3 class="title">家长抵制 云服被迫停运</h3>
								<p class="description">
									就在轨道交通S1线一期工程即将完工时<br>
									代购成员突然被要求退掉云服 退出运营<br>
									晓宇为保护全体成员的权益进行了<br>
									近半个月的斗争，最终尾款追回<br>
									被逼无奈 晓宇再次开始之前的运营模式<br>
									用笔记本运营服务器
								</p>
							</div>
						</a>
					</div>

					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>5.24</span>
							<div class="inner-content">
								<h3 class="title">S1线路开通 欣婷市成立</h3>
								<p class="description">
									随着近2个月的一期工程建设<br>
									星梦轨道交通服务器迎来了首条运营线路<br>
									完全自动化的车辆运营吸引了诸多成员<br>
									晓宇将轨道交通的城市命名为 欣婷市<br>
									这个名字代表了全体成员对星梦工艺<br>未来发展的祝愿与美好期待。
								</p>
							</div>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>6.13</span>
							<div class="inner-content">
								<h3 class="title">皮肤站开通 暮色立项</h3>
								<p class="description">
									随着正版用户的缺失和盗版登录的不足<br>
									晓宇为星梦工艺搭建了外置登录系统<br>
									安全登录的保障之下是服务器的第二个<br>
									发展高峰来临 墨白和SCP购置云服<br>
									暮色和皮肤站立项并开始了它的运营
								</p>
							</div>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>6.28</span>
							<div class="inner-content">
								<h3 class="title">天问计划提出 付诸实施</h3>
								<p class="description">
									在服务器运营期间，我们也收到建议<br>
									其中空气的天问得到晓宇和SCP的同意<br>
									随即 天问计划测试服试运行<br>
									在试运行了近两周后 SCP开始正式运营<br>
									活跃时期 星梦工艺有三个服务器同时运行
								</p>
							</div>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2020<br>10.3</span>
							<div class="inner-content">
								<h3 class="title">筱望之宇成立 探求创新</h3>
								<p class="description">
									作为曾经的大型服开发团队，<br>
									我们为谋求创新开创了筱望之宇服务器<br>
									随即 以小游戏为主打风格 开始摸索与创新<br>
									在试运行后 筱望之宇正式投入运行<br>
									它代表了一群有梦想的年轻人追求的那份纯真。
								</p>
							</div>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<span class="year">2021<br>2.08</span>
							<div class="inner-content">
								<h3 class="title">星梦工艺改组 创立社区</h3>
								<p class="description">
									作为一个下属众多子服与友链的服务器，<br>
									星梦工艺始终在为玩家的权益与体验不断奔走。<br>
									经过多次商定，筱望之宇、星梦工艺与 ECM<br>
									联合成立为星梦工艺社区<br>
									星梦工艺社区的发展势必将更进一步！
								</p>
							</div>
						</a>
					</div>
					
					
				</div>
			</div>
		</div>
	</div>
</div>

</div>
</body>
</html>